<template>
  <el-dialog
    v-model="userStore.addRelationShow"
    :before-close="close"
    :title="dialogTitle"
    width="30%"
  >
    <el-form label-width="100px">
      <el-form-item label="关联机构">
        <el-tree-select
          v-model="mechanismId"
          placeholder="请选择消防机构"
          node-key="xfjyjgTywysbm"
          style="width: 90%"
          :data="treeData"
          :props="props"
          :check-strictly="true"
          clearable
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button class="cancel" @click="close">取消</el-button>
        <el-button type="primary" class="confirm" @click="confirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useUserStore } from '@/store'
import { cgQueryFireControlTree } from '@/service'
import { ElMessage } from 'element-plus'

const userStore = useUserStore()
// 声明事件
const emit = defineEmits(['addRelation'])

defineProps({
  dialogTitle: {
    type: String,
    default: '',
  },
})

const mechanismId = ref('')
const props = {
  label: 'jgjc',
  children: 'childXfjgTreeInfo',
  disabled: 'disabled',
}
/** 获取树形数据 */
const treeData = ref([])
const getTreeData = () => {
  cgQueryFireControlTree().then((res: any) => {
    treeData.value = res
  })
}
getTreeData()

/** 取消 */
const close = () => {
  mechanismId.value = ''
  userStore.addRelationShow = false
}

/** 确认 */
const confirm = () => {
  if (!mechanismId.value) {
    return ElMessage.warning('请选择机构')
  }
  emit('addRelation', mechanismId.value)
  mechanismId.value = ''
}
</script>

<style lang="scss" scoped>
.cancel:hover {
  color: #209dbe;
}
.cancel {
  width: 90px;
}
.confirm {
  width: 90px;
  border-color: #209dbe;
  background-color: #209dbe;
}

::v-deep .el-form-item__label {
  font-weight: 700;
}
::v-deep .el-form-item__label::before {
  content: '*';
  width: 12px;
  margin-top: -2px;
  color: #f56c6c;
}
</style>
